import 'package:flutter/material.dart';
import 'dart:math' as math;

class TransformDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: Text('变换容器的例子'),
      ),
      body: Column(
        children: <Widget>[
          // 倾斜
          Container(
            margin: EdgeInsets.only(top: 80),
            color: Colors.black,
            child: Transform(
              transform: Matrix4.skewY(0.3), // //沿Y轴倾斜0.3弧度
              alignment: Alignment.topRight,
              child: Container(
                padding: const EdgeInsets.all(8),
                color: Colors.deepOrange,
                child: Text(
                  'Apartment for rent!',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                  ),
                ),
              ),
            ),
          ),

          // 平移
          Container(
            margin: EdgeInsets.only(top: 20),
            child: DecoratedBox(
              decoration: BoxDecoration(
                color: Colors.red,
              ),
              child: Transform.translate(
                offset: Offset(-20, -5),
                child: Text('Hello world'),
              ),
            ),
          ),

          // 旋转
          Container(
            margin: EdgeInsets.symmetric(vertical: 40),
            child: DecoratedBox(
              decoration: BoxDecoration(
                color: Colors.red,
              ),
              child: Transform.rotate(
                angle: math.pi/2, // 旋转90度
                child: Text('Hello world'),
              ),
            ),
          ),

          // 旋转-2
          Container(
            margin: EdgeInsets.symmetric(vertical: 40),
            child: DecoratedBox(
              decoration: BoxDecoration(
                color: Colors.red,
              ),
              child: RotatedBox(
                // 旋转90度(1/4圈)
                quarterTurns: 1,
                child: Text('Hello world'),
              ),
            ),
          ),

          // 缩放
          Container(
            margin: EdgeInsets.symmetric(vertical: 10),
            child: DecoratedBox(
              decoration: BoxDecoration(
                color: Colors.red,
              ),
              child: Transform.scale(
                scale: 1.5, // 放大到1.5倍
                child: Text('Hello world'),
              ),
            ),
          ),

          // 旋转 - 重叠
          Container(
            margin: EdgeInsets.symmetric(vertical: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                DecoratedBox(
                  decoration: BoxDecoration(
                      color: Colors.red,
                  ),
                  child: Transform.scale(
                    scale: 1.5,
                    child: Text('Hello world'),
                  ),
                ),
                Text(
                  '你好',
                  style: TextStyle(
                    color: Colors.green,
                    fontSize: 18,
                  ),
                ),
              ],
            ),
          ),

          // 旋转 - 不重叠
          Container(
            margin: EdgeInsets.symmetric(vertical: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                DecoratedBox(
                  decoration: BoxDecoration(
                    color: Colors.red,
                  ),
                  child: RotatedBox(
                    quarterTurns: 1,  // 旋转90度(1/4圈)
                    child: Text('Hello world'),
                  ),
                ),
                Text(
                  '你好',
                  style: TextStyle(
                    color: Colors.green,
                    fontSize: 18,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}